<template>
  <div v-if="data.length > 0" class="small-super-banner">
    <div v-for="(items, key) in groupData" :key="key" class="small-super-item">
      <div
        v-for="(item, index) in items"
        :key="item.id"
        v-lazy:background-image="bgImage(item.imgUrl)"
        @click="handleItemClick(item, index)"
      ></div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import { http2https, formatImgUrl } from '@/utils/util';

export default {
  name: 'small-super-banner',
  props: {
    moduleType: {
      type: Number,
      default: 1
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    colType() {
      return this.data.length;
    },
    groupData() {
      return _.groupBy(this.data, iteratee => iteratee.resourceLocation);
    }
  },
  methods: {
    bgImage(imgUrl) {
      const width = this.moduleType === 1 ? 177 : 118; // 根据iOS最大宽度换算而来 （120/375）* 414
      const height = this.moduleType === 1 ? 143 : 128;
      if (imgUrl) {
        imgUrl = formatImgUrl(imgUrl.split(',')[0], width, height);
        return http2https(imgUrl);
      }
      return '';
    },
    handleItemClick(...params) {
      this.$emit('click', ...params);
    }
  }
};
</script>

<style lang="scss" scoped>
.small-super-banner {
  .small-super-item {
    width: 355px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    background-color: #fff;
    border-radius: 10px;

    .item2 {
      width: 177px;
      height: 143px;
      background-size: 100% 100%;
      object-fit: cover;
      &:first-child {
        border-radius: 10px 0 0 10px;
        border-right: 0.5px solid #e9e9e9;
      }
      &:last-child {
        border-radius: 0 10px 10px 0;
      }
    }

    .item3 {
      width: 118px;
      height: 128px;
      background-size: 100% 100%;
      object-fit: cover;
      border-right: 0.5px solid #e9e9e9;
      &:nth-of-type(1) {
        border-radius: 10px 0 0 10px;
      }
      &:nth-of-type(3) {
        border-radius: 0 10px 10px 0;
        border-right: none;
      }
    }
  }
  .small-super-item + .small-super-item {
    margin-top: 10px;
  }
}
</style>
